<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'管廊管线告警管理'"
      :secondTitles="['管廊告警列表', '管网预警列表']"
      :slot-width="[50, 50]"
    >
      <template #left>
        <div class="w-100 h-100">
          <glgj :year="left_year_value" :month="left_month_value" />
        </div>
      </template>
      <template #middle>
        <div class="w-100 h-100">
          <glyj :year="middle_year_value" :month="middle_month_value" />
        </div>
      </template>

      <template #left_control>
        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="new Date().getFullYear()-1"
          v-model:select-value="left_year_value"
          :width="100"
        >
        </proSelect>
        <proSelect
          :optionsData="
            useOptions().month.map((label, index) => ({
              label,
              value: index + 1,
            }))
          "
          :defaultSelectValue="1"
          v-model:select-value="left_month_value"
          :width="100"
        >
        </proSelect>
      </template>

      <template #middle_control>
        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="new Date().getFullYear()-1"
          v-model:select-value="middle_year_value"
          :width="100"
        >
        </proSelect>
        <proSelect
          :optionsData="
            useOptions().month.map((label, index) => ({
              label,
              value: index + 1,
            }))
          "
          :defaultSelectValue="1"
          v-model:select-value="middle_month_value"
          :width="100"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import glgj from "./glgj.vue";
import glyj from "./glyj.vue";

import { useOptions } from "@/hook/useOptions";
const left_year_value = ref(2024);
const left_month_value = ref(1);
const middle_year_value = ref(2024);
const middle_month_value = ref(1);
</script>

<style scoped lang="less"></style>
